<template>

  <el-row class="tac">
    <el-col :span="12">
      <el-menu
        :default-active="active"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        router
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item class="user" disabled>
          <el-col :span="12">
            <div class="demo-basic--circle">
              <div class="block">
                <el-avatar :size="80" :src="image"></el-avatar>
                <div class="name">
                  {{ userInfo.role === "root"? "管理员":"考生" }}：{{ userInfo.username }}
                </div>
              </div>
            </div>
          </el-col>
        </el-menu-item>
        <el-menu-item :index="'/index/'+item.path" v-for="(item,i) in menu" :key="i">
          <i class="el-icon-setting"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>

</template>

<script>
export default {
  data(){
    return {
      image: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  props: ['userInfo', 'menu'],
  computed: {
    active: function(){
      return this.$route.path
    }
  }
}
</script>

<style scoped>
.tac, .el-menu{
  height: 100%;
  overflow: hidden;
}
.el-col-12{
  width: 100%;
  height: 100%;
}
.tac>.el-col-12{
  background-image: linear-gradient(#409EFF, #000);
}
.el-col-12 ul, .el-col-12 ul>li{
  background-color: transparent !important;
}
.el-col-12 ul li:first-child{
  height: 115px;
}
.user{
  opacity: 1 !important;
  cursor: default !important;
}
.block{
  text-align: center;
}
.name{
  line-height: 30px;
  height: 30px;
}
.el-col-12 ul li:first-child span{
  margin-top: 5px;
}
</style>
